<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
 <!--title>Material Design Bootstrap</title-->
<!-- Font Awesome -->
<link rel="stylesheet"
	href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="/css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="/css/style.css" rel="stylesheet">
<link rel="/stylesheet"
	th:href="@{https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css}">
<script
	th:src="@{https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js}"></script>
<script
	th:src="@{https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js}"></script>
</head>
<style> 
.button1align {
	transform: translate(-250px, 80px);
}

.button2align {
	transform: translate(-80px, 140px);
}

.button3align {
	transform: translate(230px, 84px);
}

.dropbtn1 {
	background-color: #F36C29;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	transform: translate(-150px, 200px);
}

.dropbtn1:hover, .dropbtn1:focus {
	background-color: #E71B1B;
}

.dropdown1 {
	position: relative;
	display: inline-block;
}

.dropdown-content1 {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	transform: translate(-290px, 66px);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content1 a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown1 a:hover {
	transform: translate(-100px, 1900px);
	background-color: #ddd;
}

.dropbtn2 {
	background-color: #F34129;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	transform: translate(-70px, 200px);
}

.dropbtn2:hover, .dropbtn1:focus {
	background-color: #E71B1B;
}

.dropdown2 {
	position: relative;
	display: inline-block;
}

.dropdown-content2 {
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	overflow: auto;
	transform: translate(-125px, 143px);
	box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
	z-index: 1;
}

.dropdown-content2 a {
	color: black;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown2 a:hover {
	background-color: #ddd;
}

.dropbtn3 {
	background-color: #F36C29;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
	cursor: pointer;
	transform: translate(-200px, 530px);
}

.dropbtn3:hover, .dropbtn1:focus {
	background-color: #E71B1B;
}

.dropdown3 {
	position: relative;
	display: inline-block;
}

.dropdown3 a:hover {
	background-color: #ddd;
}

.show {
	display: block;
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
#map {
	height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

.size {
	height: 450px;
	width: 420px;
	float: right;
}

.loading {
	background-color: #;
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 1;
	margin-top: 0px;
	top: 100px;
	left: 0px;
}

.loading-center {
	width: 100%;
	height: 100%;
	position: relative;
}

.loading-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	height: 200px;
	width: 200px;
	margin-top: -100px;
	margin-left: -100px;
}

.mapalign {
	position: left;
	transform: translate(0px, 200px);
}

.grnbtn:hover {
	background-color: #1F8714;
	border: none;
}

.grnbtn {
	background-color: #25BD15;
	border-color: silver;
	width: 75px;
	height: 55px;
	font-size: bolder;
	font-size: 16px;
	transform: translate(210px, 140px);
}

.orangebtn:hover {
	background-color: #F36C29;
	border: none;
}

.orangebtn {
	background-color: #3498DB;
	cursor: pointer;
	color: white;
	padding: 16px;
	font-size: 16px;
	border: none;
}

.greenbtn:hover {
	background-color: green;
	border: none;
}

.greenbtn {
	background-color: #00FF00;
	border-color: silver;
	width: 250px;
	height: 80px;
	font-size: 23px;
	transform: translate(350px, 35px);
	border-radius: 50%;
}


.logbtn {
	transform: translate(1150px, -310px);
	float: left;
}

.bgsize {
	background-image: url("../images/1.jpg");
	margin-top: 0px;
	background-size: cover;
	height: 100%;
}

.green-btn{
margin-top: 200px;
}

/* Toggle this class - hide and show the popup */
.popup .show {
	visibility: visible;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@
-webkit-keyframes fadeIn {
	from {opacity: 0;
}

to {
	opacity: 1;
}

}
@
keyframes fadeIn {
	from {opacity: 0;
}

to {
	opacity: 1;
}
}
</style>
<body>
	<nav
		class="mb-1 navbar navbar-expand-lg navbar-dark secondary-color lighten-1">
		<!--a class="navbar-brand" href="#"></a-->
		<button class="navbar-toggler" type="button" data-toggle="collapse"
			data-target="#navbarSupportedContent-555"
			aria-controls="navbarSupportedContent-555" aria-expanded="false"
			aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarSupportedContent-555">
			<ul class="navbar-nav mr-auto">
				<li class="nav-item active"><a class="nav-link"
					th:href="@{/redAlertUiProfile/profile}">Profile <span
						class="sr-only">(current)</span>
				</a></li>
				<li class="nav-item"><a href="" class="nav-link"
					data-toggle="modal" data-target="#basicExampleModal">Features</a></li>


				<!-- 
<li class="nav-item">
  <a href="" class="nav-link" data-toggle="modal" data-target="#modalRegisterForm">Add_Contact</a>
</li> -->
<!--
				<li class="nav-item"><a class="nav-link"
					href="/logout">Logout</a></li>
			</ul>

			<ul class="navbar-nav ml-auto nav-flex-icons">


			</ul>
		</div>  -->

		<!-- 
<li class="nav-item">
  <a href="" class="nav-link" data-toggle="modal" data-target="#basicExampleModal2">Current_location</a>
</li> -->

		</div>
	</nav>
	<!--/.Navbar -->

	<!-- SCRIPTS -->
	<!-- JQuery -->
	<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
	<!-- Bootstrap tooltips -->
	<script type="text/javascript" src="/js/popper.min.js"></script>
	<!-- Bootstrap core JavaScript -->
	<script type="text/javascript" src="/js/bootstrap.min.js"></script>
	<!-- MDB core JavaScript -->
	<script type="text/javascript" src="/js/mdb.js"></script>




	<div class="bgsize">


		<div class="loading">


			<div>
				<input type="hidden" id="idstate">
			</div>



			<center>

				<div class="dropdown1">


					<button class="btn btn-warning dropdown-toggle button1align"
						role="group" onclick="myFunction1()" type="button"
						data-toggle="dropdown" aria-label="First group">
						Orange <span class="caret"></span>
					</button>
					
						<div id="myDropdown1" class="dropdown-content1">

							<form action="/redAlertUiHome/alert-controller" method="post" th:object="${orangealert}">
								<div>
<!-- 									<input name="city" type="hidden" id="idcity">  -->
<!-- 									<input name="postal" type="hidden" id="idpostal"> -->
									<input name="latitude"   type="hidden" id="idlatitude">
									<input name="longitude"  type="hidden" id="idlongitude">
									<input name="dName" type="hidden" value="palakkad" id="dnameId1">

								</div>
								<div th:if="${orangealert!=null}">
								<input type="hidden" th:field="${orangealert.type}">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="WomenMolestation">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="Flood">
							

							</form>




						</div>
				</div>
				<div class="dropdown2">
					<button class="btn btn-danger dropdown-toggle button2align"
						role="group" onclick="myFunction2()" type="button"
						data-toggle="dropdown" aria-label="Second group">
						Red <span class="caret"></span>
					</button>
					<div id="myDropdown2" class="dropdown-content2">

							<form action="/redAlertUiHome/alert-controller" method="post" th:object="${redalert}">
								<div>
<!-- 									<input name="city" type="hidden" id="idcity">  -->
<!-- 									<input name="postal" type="hidden" id="idpostal"> -->
									<input name="latitude"   type="hidden" id="idlatitude1">
									<input name="longitude"  type="hidden" id="idlongitude1">
									<input name="dName" type="hidden" value="palakkad" id="dnameId">

								</div>
								
								<input type="hidden" th:field="${redalert.type}">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="WomenMolestation">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="Flood">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="Earthquake">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="Robbery">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="Fire Hazard">
								<input type="submit" th:name="description" class="btn btn-default btn-block" value="Road Accident">
							

							</form>

					
					
				</div>
				<div>
				<form action="/redAlertUiHome/green" method="get">
					<button type="submit" class="btn btn-success button3align"
						role="group" onclick="sam()" 
						aria-label="Third group" th:value="${message}">Green</button>
						<p id="greenbtnmsg"></p>
						
						</form>
						
						<input type="hidden" th:value="${message}" id="hiddenId">
				</div>


			</center>

			<div class="mapalign">

				<div id="map"
					style="height: 280px; width: 1370px; vertical-align: bottom; float: right;"></div>
				<input type="hidden" id="lat" value=" "> <input
					type="hidden" id="long" value=" ">
			</div>

		</div>

		<!--
<div class="modal fade" id="basicExampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Your Current Location</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
       
      </div>
    </div>
  </div>
</div>
-->


		<div class="modal fade" id="basicExampleModal" tabindex="-1"
			role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<h5 class="modal-title" id="exampleModalLabel">About our
							application</h5>
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close">
							<span aria-hidden="true">&times;</span>
						</button>
					</div>
					<div class="modal-body">Our application Red Alert provides
						sudden alert notificatons for the required authorities in a panic
						situation. Three buttons Red, Orange and Green indicates
						danger,warning and safe situations respectively. ...</div>

					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>

					</div>
				</div>
			</div>
		</div>
		


		<!--
 <div class="modal fade" id="modalRegisterForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Add Contact</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <i class="fas fa-user prefix grey-text"></i>
          <input type="text" id="orangeForm-name" class="form-control validate">
          <label data-error="wrong" data-success="right" for="orangeForm-name">Contact Name</label>
        </div>
        <div class="md-form mb-5">
          <i class="fas fa-phone prefix grey-text"></i>
          <input type="text" id="orangeForm-number" class="form-control validate">
          <label data-error="wrong" data-success="right" for="orangeForm-number">Contact Number</label>
        </div>

        <div class="md-form mb-4">
          <i class="fas fa-user prefix grey-text"></i>
          <input type="text" id="orangeForm-name" class="form-control validate">
          <label data-error="wrong" data-success="right" for="orangeForm-name">Contact Relationship</label>
        </div>

      </div>
      <div class="modal-footer d-flex justify-content-center">
        <button class="btn btn-deep-orange">Add</button>
      </div>
    </div>
  </div>
</div>
-->


		<script>
var country = document.getElementById('idcountry');
    var state = document.getElementById('idstate');
    var city = document.getElementById('idcity');
    var postal = document.getElementById('idpostal');
    var latitude = document.getElementById('idlatitude');
    console.log(latitude.value+"hdggf");
    var longitude = document.getElementById('idlongitude');
    var latitude1 = document.getElementById('idlatitude1');
    var longitude1 = document.getElementById('idlongitude1');
    var ip = document.getElementById('idipv4');
	var loc;
	

	var x = document.getElementById("map");
      var map;
      function initMap() {
	  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  } else { 
    x.innerHTML = "Geolocation is not supported by this browser.";
  }


function showPosition(position) {
	//double y=position.coords.latitude ;
 //x.innerHTML = position.coords.latitude;
  //"<br>Longitude: " + position.coords.longitude;
	  loc={lat:  position.coords.latitude, lng: position.coords.longitude};
	  
	//  latitude.value =  loc.lat;
	  console.log(latitude.value+"hdggfffff");
        map = new google.maps.Map(document.getElementById('map'), {
          center: loc,
          zoom: 15
        });
        //console.log(loc.lat+"rtdtr"+longitude1.value);
		//console.log(position.coords.latitude);
		document.getElementById("lat").value=position.coords.latitude;
		document.getElementById("long").value=position.coords.longitude;
		var marker= new google.maps.Marker({position: loc, map: map}); 
      }
	  }
	  function callback(data)
    {
        //country.value = data.country_name;

        state.value = data.state;
       // city.value = data.city;
       // postal.value= data.postal;
        latitude.value =  loc.lat;
        console.log(latitude.value+"ffffff");
       
        longitude.value =  loc.lng;

        longitude1.value =  loc.lng;
        latitude1.value =  loc.lat;
    
      // ip.innerHTML = data.IPv4;

	   	
		  } console.log("ffffff");
	 
		var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://geoip-db.com/json/geoip.php?jsonp=callback';
    var h = document.getElementsByTagName('script')[0];
    h.parentNode.insertBefore(script, h);
	 
    </script>
		<script
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCK0l0DbiEjIZvz-Y97CwnzI6YdWCbcIOQ&callback=initMap"
			async defer></script>
		<script>


// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown-content1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>
		<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction1() {
  document.getElementById("myDropdown1").classList.toggle("show");
}
function myFunction2() {
  document.getElementById("myDropdown2").classList.toggle("show");
}
function myFunction3() {
var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn1')) {
    var dropdowns = document.getElementsByClassName("dropdown-content1");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

</script>
 <!-- <script th:inline="javascript">
 /*<!CDATA[*/
	 window.onload=function(){
 var message="[[${message}]]";
 console.log("workinggggg");
console.log(message);
 }
/*]]>*/

</script> -->
<script>

function sam()
{
	var x= document.getElementById("hiddenId");
	console.log("ssss"+x.value);
	alert(x.value);
	}
</script>

		<!-- <script>
// When the user clicks on div, open the popup

function myFunction() {
  var popup = document.getElementById("myPopup");
  popup.classList.toggle("show");
} 
<!-- </script> -->
		<!--	<% UserRegController   urc =new  UserRegController();
  String userName=urc.userName(request.getRemoteUser());
  out.println("WELCOME"+"&nbsp"+"&nbsp"+"&nbsp" +"&nbsp"+userName+".");
  
 %>-->
	</div>
</body>
</html>
